<template>
    <div>
        <Modal v-model="selectSwitch" width="800">
            <p slot="header" style="text-align:center">
                <span>选择企业</span>
            </p>
            <div class="disFlex Flex-middle search">
                <Input v-model="searchVal" search enter-button="搜索" placeholder="请输入企业名称或者企业ID" @on-search="init(1,searchVal)" />
            </div>
            <div class="adaptiveContainer"> 
                <Table :columns="columnsData" :loading="loading" :data="shopSelectList.shop" height="400"></Table>
            </div>
            <div class="shop-logo disFlex" v-if="hasSelectArray.length != 0">
                <div class="logo-item disFlex" v-for="(item,index) in hasSelectArray">
                    <img :src="item.shop_sign">
                    <div class="del disFlex Flex-middle Flex-center" @click="cancelFn(index)">×</div>
                </div>
            </div>
            <Row class="pageContainer" type="flex" justify="center">
                <Col>
                    <Page :total="allPage * 20" :page-size="20" show-elevator @on-change="changePageFn" />
                </Col>
            </Row>
            <div class="disFlex Flex-center" slot="footer">
                <Button type="primary" @click="confirmFn">确定</Button>
            </div>
        </Modal>
    </div>
</template>
<style scoped lang="less">
/*搜索*/
.search {
    padding: 15px 0;
    box-sizing: border-box;
    background: #fff;
}

/*搜索下拉*/
.search-select {
    width: 20%;
    margin-right: 15px;
}

/*搜索输入框*/
.search-input {
    margin-right: 15px;
}

/*搜索确定按钮*/
.search-button{
    width: 7%;
}

/*分页*/
.pageContainer {
    padding: 16px 0 0;
    background: #fff;
}

.shop-logo {
    width: 100%;
    overflow-x: scroll;
    flex-wrap: nowrap;
    margin-top: 15px;

    .logo-item {
        position: relative;
        top: 0;
        left: 0;
        margin-left: 15px;

        &:nth-of-type(1) {
            margin-left: 0;
        }

        img {
            width: 60px;
            height: 60px;
        }

        .del {
            position: absolute;
            top: 0;
            right: 0;
            width: 15px;
            height: 15px;
            background: red;
            color: #fff;
            font-weight: bold;
            cursor: pointer;
        }
    }
}
</style>
<script>
    import {shopSelectList,shopMultiSelection} from 'api/shop'
    export default {
        data () {
            return {
                selectSwitch: false,

                // 表格加载开关
                loading: true,

                // 表格高度
                tableHeight: '',

                // 搜索值
                searchVal: '',

                // 是否单选
                singleElection: true,

                columnsData: [
                    {
                        title: '企业ID',
                        width: 100,
                        render: (h, params) => {
                            return h('span', params.row.shop_id);
                        } 
                    },
                    {
                        title: '品牌图片',
                        width: 100,
                        render: (h, params) => {
                            return h('img', {
                                attrs: {
                                    src: params.row.shop_sign,
                                },
                                style: {
                                    width: '48px',
                                    height: '48px',
                                    margin: '10px 0', 
                                },
                            })
                        } 
                    },
                    {
                        title: '企业名称',
                        align: 'center',
                        render: (h, params) => {
                            return h('span', params.row.shop_title);
                        }
                    },
                    {
                        title: '操作',
                        width: 100,
                        align: 'center',
                        render: (h, params) => {
                            let hasSelectIndex = this.hasSelectArray.findIndex(item => item.shop_id == params.row.shop_id)
                            let str = hasSelectIndex < 0 ? '选择' : '取消'
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: hasSelectIndex < 0 ? 'primary' : 'default',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            

                                            // 是否单选
                                            if(this.singleElection){
                                                if(hasSelectIndex < 0){
                                                    // 限制单选
                                                    if(this.hasSelectArray.length < 1) {
                                                        this.hasSelectArray.push(this.shopSelectList.shop[params.index])
                                                    }else {
                                                        this.hasSelectArray.splice(0,1,this.shopSelectList.shop[params.index])
                                                    }
                                                }else {
                                                    this.hasSelectArray.splice(0,1)
                                                }
                                            }else {
                                                if(hasSelectIndex < 0){
                                                    // 限制多选
                                                    this.hasSelectArray.push(this.shopSelectList.shop[params.index])
                                                }else {
                                                    this.hasSelectArray.splice(hasSelectIndex,1)
                                                }
                                            }
                                        }
                                    }
                                }, str)
                            ]);
                        }
                    }
                ],
                shopSelectList: [],

                // 已选
                hasSelectArray: [],

                // 总页数
                allPage: 1,
            }
        },
        computed:{
        },
        mounted(){
            // 初始化表格高度/监听窗口变化
            // this.windowResizeFn()

            // 初始化
            this.init(1,this.searchVal)
        },
        methods: {
            // 获取数据
            // _open => 打开查询企业
            init(_page,_searchKeyword,_open){
                // 开启表格加载
                this.loading = true

                // 请求参数
                let params = {
                    page: _page,
                    search: _searchKeyword,
                }

                shopSelectList(params).then(_data => {

                    // 判断是第1页
                    if(_page == 1){
                        this.allPage = _data.data.pages
                    }

                    // 如果是打开查询制定企业
                    if(_open){
                        if(_searchKeyword != ''){
                            this.hasSelectArray = _data.data.shop
                        }
                        this.selectSwitch = true
                        this.loading = false
                        return false
                    }

                    this.shopSelectList = _data.data

                    // 重置滚动条
                    document.getElementsByClassName("ivu-table-body")[0].scrollTop = 0

                    // 结束过度动画
                    this.$nextTick(() => {
                        this.loading = false
                    })

                }).catch(_err => {
                    console.log(_err)
                })
            },

            // 搜索
            initArray(_obj){
                shopMultiSelection({shops: _obj.join(',')}).then(_data => {
                    this.hasSelectArray = _data.data

                    this.init(1,this.searchVal,true)

                }).catch(_err => {
                    console.log(_err)
                })
            },

            // 切换分页
            changePageFn(_page){
                this.init(_page,this.searchVal)
            },

            // 监听窗口变化
            windowResizeFn(){
                // 设置表格高度
                this.tableHeight = document.getElementsByClassName("adaptiveContainer")[0].offsetHeight
                
                // 监听窗口变化
                window.onresize = () => {
                    this.tableHeight = document.getElementsByClassName("adaptiveContainer")[0].offsetHeight
                };
            },

            // 打开企业选择器
            openFn(_obj){
                if(_obj instanceof Array){
                    this.singleElection = false
                }else {
                    let _searArray = []
                    _searArray.push(_obj)
                    _obj = JSON.parse(JSON.stringify(_searArray))
                }
                
                this.searchVal = ''
                this.initArray(_obj)
            },

            // 提交
            confirmFn(){
                this.$emit('commitShopFn', JSON.parse(JSON.stringify(this.hasSelectArray)))
                this.selectSwitch = false
            },

            // 删除已选
            cancelFn(_index){
                this.hasSelectArray.splice(_index,1)
            }
        }
    }
</script> 